<template>
    <div>
        <div class="left">
            <div class="card"> 
                <div class="card_title"><i></i>
                <div>
                    <span class="sub_title" :class="{b_a_color: currentIndex === '实时巡检'}" @click="changeSubTitle('实时巡检')">实时巡检</span>
                    <span style="color: #00FFFF;margin: 0 6px">|</span>
                    <span class="sub_title" :class="{b_a_color: currentIndex === '动态漫游'}" @click="changeSubTitle('动态漫游')">动态漫游</span>
                </div>
                <i class="more_icon"></i></div> 
            </div>
        </div>
        <div class="right_cell">
            <div v-for="(item,index) in list" :key="index">
                <img :src="item.img" alt="">
                <p>{{ item.text }}</p>
            </div>
        </div>
        
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentIndex: '动态漫游',
            list: [
                { img: require("../../static/img/1.png"), text: "无人机路线1" }, 
                { img: require("../../static/img/2.png"), text: "无人机路线2" }, 
                { img: require("../../static/img/3.png"), text: "无人机路线3" }, 
                { img: require("../../static/img/4.png"), text: "无人机路线4" }, 
                { img: require("../../static/img/5.png"), text: "无人机路线5" }, 
                { img: require("../../static/img/6.png"), text: "无人机路线6" }, 
                { img: require("../../static/img/7.png"), text: "无人机路线7" }, 
                { img: require("../../static/img/8.png"), text: "无人机路线8" }, 
                { img: require("../../static/img/9.png"), text: "无人机路线9" }, 
            ],
        }
    },

    methods: {
        changeSubTitle(data){
            this.currentIndex = data;
            if(data === '实时巡检'){
                this.$router.push("/realInspection");
                this.$bus.$emit("send-Message","P4.1");
            }else{ 
                this.$bus.$emit("send-Message","P4.2");
            }
        },
    },
}
</script>

<style lang="scss" scoped> 
@import "@/assets/styles/overView.scss"; 

.b_a_color{
    color: #1FD7FF;
}

.right_cell{
    height: calc(100% - 16px);
    width: 139px;
    padding: 16px;
    box-sizing: border-box;
    position: absolute;
    z-index: 11;
    right: 40px;
    background: url("~@static/img/Frame427319176.png") no-repeat 0 0/100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    >div{
        width: 100%;
        height: calc((100% / 9) - 16px);
        position: relative;
        cursor: pointer;
        img{
            width: 100%;
            height: 100%;
        }
        p{
            color: #fff;
            font-size: 12px;
            position: absolute;
            text-align: center;
            bottom: 3px;
            width: 100%;
        }
    }
}
</style> 